<template>
  <view class="main">
    <template>
      <view class="u-m-20">
        <u-section title="统计地区各煤矿异常处置时已超时的情况" :right="false"></u-section>
      </view>
      <view class="list-tit u-flex u-m-b-20">
        <view>煤矿名称</view>
        <view>矿处置超时</view>
        <view>集团核查超时</view>
        <!-- <view>市核查超时</view> -->
      </view>
      <view class="list-tit u-flex u-m-b-20">
        <view>合计</view>
        <view>{{ sumData.customerCount }}</view>
        <view>{{ sumData.countyCount }}</view>
        <!-- <view>{{ sumData.cityCount }}</view> -->
      </view>
      <scroll-view
        :scroll-y="true"
        style="height: calc(100% - 260rpx); width: 100%"
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="50"
        refresher-background="#F5F5F5"
        @refresherrefresh="onRefresh"
        @refresherpulling="onPulling"
        @refresherrestore="onRestore"
        @refresherabort="onAbort"
        @scrolltolower="onScrollToLower"
      >
        <view class="container-body">
          <template v-if="list && list.length > 0">
            <view class="u-p-30" style="padding-top: 0 !important">
              <view v-for="(item, index) in list" :key="index" class="my-card u-flex">
                <view
                  ><text class="f-14">{{ item.countyName }}</text></view
                >
                <view
                  ><text class="f-14">{{ item.customerCount }}</text></view
                >
                <view
                  ><text class="f-14">{{ item.countyCount }}</text></view
                >
                <!-- <view
                  ><text class="f-14">{{ item.cityCount }}</text></view
                > -->
              </view>
            </view>
          </template>
          <template v-else>
            <view class="c-empty p-absolute-center">
              <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
            </view>
          </template>
        </view>
      </scroll-view>
    </template>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  props: {
    search: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      clickCity: false,
      triggered: false, // 下拉刷新
      searchData: {
        countyNo: "",
        customerNo: "",
        endTime: "",
        functionCode: "",
        isCustomerQuery: "1",
        orderByRule: "",
        pageSize: 20,
        pageNumber: 1,
        startTime: "",
      },
      sumData: {},
    };
  },
  watch: {
    search: {
      immediate: true,
      deep: true,
      handler(val) {
        this.searchData = {
          ...this.searchData,
          startTime: val.beginDate,
          endTime: val.endDate,
          countyNo: val.countyNo,
          customerNo: val.customerNo,
          pageNumber: 1,
        };
        this.init();
        this.getData();
      },
    },
  },
  mounted() {},
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
    },
    getSum() {
      this.$post("/alarmDisposeCount/timeDispose/totalCount", {
        ...this.searchData,
        isCustomerQuery: "",
      }).then((data) => {
        if (data.body) {
          this.sumData = data.body;
        }
      });
    },
    getRate(item) {
      let num = 0;
      if (item.totalCount) {
        if (item.yesDisposalCount) {
          num = item.yesDisposalCount / item.totalCount;
        }
      }
      return (num * 100).toFixed(2);
    },
    /**
     * 请求数据
     */
    async getData() {
      if (this.searchData.isCustomerQuery) {
        await this.getSum();
      }
      const res = await this.$post("/alarmDisposeCount/timeDispose/dataList", this.searchData);
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
      }
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onRestore() {},
    onAbort() {},
    getColumnTotal(list, key) {
      let num = 0;
      list?.forEach((item) => {
        if (item[key] && parseFloat(item[key]).toString() !== "NaN") {
          num += parseFloat(item[key]);
        }
      });
      return num;
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #f7f7fa;
}
.row {
  margin-top: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  padding: 20rpx;
}
.list-tit {
  margin-top: 20rpx;
  background: #fff;
  padding: 28rpx 44rpx;
  color: #4b4b4b;
  width: 100%;
  > view {
    width: 33%;
    text-align: center;
  }
}
.my-card {
  background: #fff;
  border: 1px solid rgb(255, 255, 255);
  box-shadow: 0px 1px 40rpx rgba(184, 184, 184, 0.2);
  border-radius: 8rpx;
  position: relative;
  margin-bottom: 20rpx;
  align-items: center;
  justify-content: space-around;
  > view {
    width: 33%;
    padding: 28rpx 6rpx;
    text-align: center;
    &::after {
      content: "";
      position: absolute;
      width: 1rpx;
      height: 80%;
      background: #e9e9e9;
      left: 33%;
      top: 10%;
    }
    &:nth-child(2) {
      &::after {
        content: "";
        position: absolute;
        width: 1rpx;
        height: 80%;
        background: #e9e9e9;
        left: 66%;
        top: 10%;
      }
    }
    // &:nth-child(3) {
    //   &::after {
    //     content: "";
    //     position: absolute;
    //     width: 1rpx;
    //     height: 80%;
    //     background: #e9e9e9;
    //     left: 75%;
    //     top: 10%;
    //   }
    // }
    &:last-child {
      &::after {
        width: 0;
      }
    }
  }
}
.card-row {
  display: flex;
  margin-bottom: 0;
  &.green {
    .value {
      color: #0acf97;
    }
  }
  .card-row-item:nth-child(2) {
    border-left: 1px solid #eee;
  }
  .card-row-item:nth-child(3) {
    border-left: 1px solid #eee;
  }
}
.card-row-item {
  flex: 1;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 0 20rpx;
  box-sizing: border-box;
  text-align: center;
  .label {
    font-family: Noto Sans SC;
    color: rgb(102, 102, 102);
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 10rpx;
  }
  .value {
    color: #288cfe;
    font-family: Noto Sans SC;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    .unit {
      color: rgb(153, 153, 153);
      font-weight: 400;
      margin-left: 10rpx;
    }
  }
}
.t-red {
  color: #fa5c7c;
}

.row {
  margin-top: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  padding: 20rpx;
}

.underline {
  text-decoration: underline;
  color: #288cfe;
}
.w-20p {
  width: 20%;
}
</style>
